<template>
    <el-image
        v-if="src"
        class="img"
        :style="style"
        lazy
        :fit="fit"
        :src="imgUrl + src + '?w=100&h=100'"
        @click="priview"
    >
        <template #error>
            <div
                class="img-error"
                :style="{
                    ...style,
                    lineHeight: size / 2 + 'px',
                }"
            >
                <p>加载</p>
                <p>失败</p>
            </div>
        </template>
    </el-image>
    <div
        v-else
        class="img-error"
        :style="{
            ...style,
            lineHeight: size + 'px',
        }"
    >
        暂无
    </div>

    <el-dialog v-model="imgVisible" append-to-body>
        <img w-full :src="imgUrl + src" />
    </el-dialog>
</template>

<script setup>
import { inject, ref } from "vue";

const props = defineProps({
    src: {
        type: String,
        default: "",
    },
    size: {
        type: Number,
        default: 50,
    },
    radius: {
        type: Number,
        default: 5,
    },
    errorText: {
        type: String,
        default: "暂无",
    },
    fit: {
        type: String,
        default: "cover",
    },
});

const imgUrl = inject("imgUrl");
const style = ref({
    width: props.size + "px",
    height: props.size + "px",
    borderRadius: props.radius + "px",
});

const imgVisible = ref(false);
const priview = () => {
    imgVisible.value = true;
};
</script>

<style scoped lang="less">
.img {
    overflow: hidden;
}

.img-error {
    background: #ccc;
    font-size: 13px;
    color: #fff;
    display: inline-block;
    text-align: center;
}
</style>
